<template>
  <div style="padding: 15px">
    <div style="margin-bottom: 15px;">
      <Input style="width: 200px;" placeholder="请输借阅编号"/>
      <Input style="width: 200px;" placeholder="请输读者编号"/>
      <Input style="width: 200px;" placeholder="请输读者姓名"/>
      <Button type="success">搜索</Button>
    </div>
    <Table border :columns="columns7" :data="data6"></Table>
    <Page :total="100" show-elevator />
  </div>
</template>
<script>
  export default {
    name: 'advance-management',
    data () {
      return {
        columns7: [
          {
            title: '借阅编号',
            align: 'center',
            tooltip: true,
            key: 'name'
          },
          {
            title: '读者编号',
            align: 'center',
            tooltip: true,
            key: 'age'
          },
          {
            title: '读者姓名',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '借阅书籍',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: 'ISBN',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '借出时间',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '还书时间',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '书籍所属书屋',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '书籍借出书屋',
            align: 'center',
            tooltip: true,
            key: 'address'
          },
          {
            title: '是否逾期',
            align: 'center',
            tooltip: true,
            key: 'address',
            render: (h, params) => {
              const row = params.row
              const color = row.topTeacher === '1' ? '#32e636' : row.topTeacher === '0' ? '#db2516' : ''
              const type = row.topTeacher === '1' ? 'md-checkmark-circle' : row.topTeacher === '0' ? 'md-close-circle' : ''
              return h('Icon', {
                props: {
                  type: type,
                  color: color,
                  size: 20
                }
              })
            }
          },
          {
            title: '逾期扣款',
            align: 'center',
            tooltip: true,
            key: 'address'
          }
        ],
        data6: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            topTeacher: '1'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            topTeacher: '1'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            topTeacher: '0'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            topTeacher: '1'
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>
